<script setup lang="ts">
definePageMeta({
  layout: 'default',
})

const router = useRouter()
const route = useRoute()
const userInfo = useUserInfoState()
// 微信静默授权逻辑
async function handleWechatAuth() {
  const isWeChat = /micromessenger/i.test(navigator.userAgent)
  const { code, state } = route.query

  // 非微信环境直接跳过
  if (!isWeChat)
    return

  // 已有code时处理回调
  if (code && typeof code === 'string') {
    try {
      const { data } = await useFetchPost('/api/Wechat/callback', {
        code,
        device_id: userInfo.value.device_id,
        state, // 回传state校验
      })
      // 清除URL中的code参数（避免重复提交）
      window.history.replaceState({}, '', window.location.pathname)
    }
    catch (error) {
      console.error('微信授权失败:', error)
    }
    return
  }

  // 无code时发起静默授权
  const appid = 'wx1de2d909e8c3e5f7'
  const redirectUri = encodeURIComponent(window.location.href)
  const scope = 'snsapi_base' // 改为静默授权
  const stateKey = Math.random().toString(36).substr(2, 6) // 生成随机state

  // 存储state到localStorage校验
  localStorage.setItem('wx_auth_state', stateKey)

  const authUrl = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=${stateKey}#wechat_redirect`
  window.location.href = authUrl
}

onMounted(() => {
  handleWechatAuth()
})
const showXuzhi = ref(false)
function closeModal() {
  showXuzhi.value = false
}

function goShop() {
  window.location.href = 'https://web.kongshengwh.com'
}
</script>

<template>
  <div class="min-h-screen w-full relative">
    <!-- 自适应背景图 -->
    <img
      src="/assets/images/shouye.png"
      alt=""
      class="h-auto w-full object-contain"
    >
    <div class="animate-float-left text-xl text-black opacity-80 flex right-[5%] top-[2%] justify-center absolute hover:opacity-100" @click="goShop">
      <button>
        <img src="/assets/images/shangcheng.png" alt="" class="h-16">
      </button>
    </div>
    <div class="animate-float-right text-xl text-black opacity-80 flex right-[5%] top-[10%] justify-center absolute hover:opacity-100" @click="router.push('desc')">
      <button>
        <img src="/assets/images/jj.png" alt="" class="h-16">
      </button>
    </div>
    <div class="animate-float-left text-xl text-black opacity-80 flex right-[5%] top-[18%] justify-center absolute hover:opacity-100" @click="showXuzhi = true">
      <button>
        <img src="/assets/images/xuzhi.png" alt="" class="h-16">
      </button>
    </div>
    <div
      v-show="showXuzhi"
      class="opacity-0 flex delay-[100ms] items-center inset-0 justify-center fixed z-2 animate-fade-in-up"
    >
      <div class="bg-black bg-opacity-50 flex items-center inset-0 justify-center absolute" @click="closeModal">
        <div class="w-[90%] relative md:w-[30%]">
          <!-- 背景图 -->
          <img
            src="/assets/images/jieshaoye.png"
            alt=""
            class="w-full"
          >
        </div>
      </div>
    </div>

    <!-- 固定定位按钮 -->
    <div class="text-xl text-black opacity-80 flex cursor-pointer bottom-[3%] left-0 right-0 justify-center fixed animate-bounce hover:opacity-100" @click="router.push('select')">
      <div class="text-center">
        <span class="text-[#5a2212]">点击进入</span>
      </div>
    </div>
  </div>
</template>

<style setup>
  /* @keyframes scaleAnimation {
    0% {
      transform: scale(0.8);
    }
    50% {
      transform: scale(1.0);
    }
    100% {
      transform: scale(0.8);
    }
  }

  .animate-scale {
    animation: scaleAnimation 3s ease-in-out infinite;
  } */

@keyframes float-left {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  33% {
    transform: translate(5px, 5px) rotate(1deg);
  }
  66% {
    transform: translate(-3px, -3px) rotate(-1deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}
@keyframes float-right {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  33% {
    transform: translate(5px, 5px) rotate(1deg);
  }
  66% {
    transform: translate(-3px, -3px) rotate(-1deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}
.animate-float-left {
  animation: float-left 3s ease-in-out infinite;
}

.animate-float-right {
  animation: float-right 3s ease-in-out infinite;
}

/* 自定义淡入上升动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 注册Tailwind动画 */
.animate-fade-in-up {
  animation: fadeInUp 0.1s ease-out forwards;
}

/* 定义延迟类 */
.delay-\[100ms\] {
  animation-delay: 100ms;
}
</style>
